<!--
 * @Author: byron
 * @Date: 2021-09-28 23:23:29
 * @LastEditTime: 2021-10-05 15:21:47
-->
<template>
    <ul
        class="tabs"
        :style="
            offset == 'right'
                ? 'justify-content: flex-end;'
                : 'justify-content: flex-start'
        "
    >
        <template v-if="isRouteMode">
            <router-link
                v-for="(item, index) in tabs"
                :key="index"
                :to="item.to"
                tag="li"
                :class="['tabs-item', tabClass]"
                :active-class="activeClass"
                >{{ item.title }}</router-link
            >
        </template>

        <template v-else>
            <li
                :class="
                    index == active
                        ? ['tabs-item', tabClass, 'active']
                        : ['tabs-item', tabClass]
                "
                v-for="(item, index) in tabs"
                :key="index"
                @click="changeTab(index)"
            >
                {{ isObject ? item.title : item }}
            </li></template
        >
    </ul>
</template>

<script>
// import { getKebabCase } from '@/utils'
export default {
    name: 'Tabs',
    components: {},
    props: {
        active: {
            type: Number,
            default: 0,
        },
        tabs: {
            type: Array,
            default: () => [],
        },
        offset: {
            type: String,
            default: 'left',
        },
        // mv-class为宽padding
        tabClass: {
            type: String,
            default: '',
        },
        activeClass: {
            type: String,
            default: '',
        },
    },
    model: {
        prop: 'active',
        event: 'tabChange',
    },
    data() {
        return {}
    },
    watch: {},
    computed: {
        isObject() {
            if (!this.tabs) return
            if (typeof this.tabs[0] === 'object') return true
            return false
        },
        isRouteMode() {
            return (
                this.tabs &&
                this.tabs[0].to !== undefined &&
                this.tabs[0].to !== null
            )
        },
    },
    methods: {
        changeTab(index) {
            this.$emit('tabChange', index)
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.tabs {
    @include flex-center;

    .tabs-item {
        cursor: pointer;
        margin: 0px 8px;
        padding: 10px 0px;
        font-size: 14px;
        &.active {
            color: var(--font-title-color);

            &:hover {
                color: red;
            }
        }
        &.mv-class {
            padding: 4px 12px;
            margin: 0 16px;
        }
        &.tabs-item-active {
            color: var(--font-title-color);
        }
    }
}
</style>
